<template>
<div class="wordRecordContainer">
  <var-app-bar title="单词学习记录">
    <template #left>
      <var-button
          round
          text
          color="transparent"
          text-color="#fff"
          @click="goBack"
      >
        <var-icon name="chevron-left" :size="24" />
      </var-button>
    </template>
  </var-app-bar>

  <div v-if="data.length === 0" style="margin-left: 20%">
    <img src="../../assets/static/无法分析.png" />
    <h3 style="margin-left: 22%">没有数据哦</h3>
  </div>


  <var-table v-else>
    <thead>
    <tr>
      <th>日期</th>
      <th>单词</th>
    </tr>
    </thead>
    <tbody>
      <tr v-for="dat in data" :key="dat.date">

        <td>{{ dat.date }}</td>
        <td>
          <div v-for="word in dat.data" :key="dat.data">
            <p>{{ word.word }}</p>
          </div>
        </td>

      </tr>
    </tbody>
  </var-table>

</div>
</template>

<script lang="ts" setup>

import router from "@/router";
import {onMounted, ref} from "vue";
import {getAllStudyDate} from "@/api/studyAPI";
import store from "@/store";


const data = ref([])

const goBack = () => {
  router.back()
}

onMounted(() => {
  getAllStudyDate(store.state.userModel.id)
      .then(res => {
        console.log(res)
        data.value = res.data
      })
})
</script>

<style scoped>
.wordRecordContainer{

}
</style>